<template>
	<view class="background">
		<view class="passenger-list">
			<view 
				v-for="(passenger, passengerIndex) in passengerList"
				:key="passengerIndex" 
				@tap="toAddPassenger(passenger.id)"
				class="passenger-item">
				<image
					@click.stop="removePassenger(passenger.id, passenger.passengerName)" 
					src="../../static/icon_remove_red.png" />
				<view  class="passenger-info">
					<text style="font-size: 32rpx; font-weight: bold;">{{passenger.passengerName}}</text>
					<text style="font-size: 28rpx; color: #949699;">
						<text>身份证</text>
						<text style="margin-left: 10upx;">{{passenger.idCard}}</text>
					</text>
				</view>
				<image src="../../static/icon_edit_blue.png" />
			</view>
		</view>
		<view class="bottom-view">
			<view @tap="toAddPassenger()" class="bottom-btn">
				<text>添加</text>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api';
	export default {
		data() {
			return {
				passengerList: [],
			}
		},
		
		onLoad(option) {
			this.queryByUserId();
		},
		
		methods: {
			// 查询
			async queryByUserId() {
				const {data = []} = await api.user.queryByUserId();
				this.passengerList = data;
			},
			
			toAddPassenger(id = "") {
				uni.navigateTo({
					url: `../my/addPassenger?id=${id}`
				})
			},
			
			// 删除乘客
			removePassenger(id, name) {
				uni.showModal({
					title: '提示',
					content: '确定删除"' + name + '"?',
					success: (res) => {
						if (res.confirm) {
							api.user.delPassenger({id: id}).then(res=>{
								if(res.code == 200){
									this.queryByUserId()
								}
							})
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.background {
		height: 100%;
		background: linear-gradient(to bottom, #2697FF 0%, #F7F7F7 30%);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.passenger-list {
			background: #ffffff;
			border-radius: 16upx;
			margin: 20upx;
			.passenger-item {
				display: flex; 
				flex-direction: row;
				justify-content: space-between; 
				align-items: center;
				border-bottom: solid 1upx #EFEFEF;
				padding: 20upx;
				image {
					width: 40upx;
					height: 40upx;
				}
				.passenger-info {
					height: 100upx;
					display: flex;
					flex-direction: column;
					justify-content: space-between; 
					display: flex;
					flex: 1;
					margin-left: 20upx;
					flex-direction: column;
				}
			}
		}
		.bottom-view {
			height: 150upx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			background: #FFFFFF;
			.bottom-btn {
				width: 90%;
				margin-top: 10upx;
				height: 100upx;
				border-radius: 16upx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				background: #2697FF;
				color: #FFFFFF;
			}
		}
	}
</style>
